-# CSS that applies to every page of the ZepInvest application.

body
/*  +zepstripe

/*  +zepfrog_utilities*/*/

  -# Zepinvest Look-and-Feel Styles

  fieldset
    :border none

    li.submit input,
    input.submit
      :padding-top 0.5em

  h1, legend
    :color = !blue
    :font-size 140%
    :font-weight bold
  -# Begin Main Layout

  h1
    :color = !medium_blue

  .mainContent
    :min-height 350px
    :padding-top = !h1_vertical_space
    .floatleft
      /* "body .container .mainContent" is necessary here in order to override
        Blueprint's span-n styles, which are applied to ".body .container"
      :float left
      :position relative
    .floatright
      :float right
      :position relative
    div
      h1
        +pull(5)
        :margin-top = (!h1_vertical_space * -1) + 1em
    div.span-24
      /* The H1 can't be pulled so far right if there's no left nav
      /* Since the left nav is 'source order' it is positioned by float and margin
      /* which affects spacing quite a bit in unspecified ways.
      h1
        +reset-spacing
        :float none
        :margin-bottom 1em
  a.rightarrow
    /* make a right arrow appear to the left of the link text
    :background transparent no-repeat 3px 0
    :background-image = !right_arrow_bg_img
    / :display block
    :width 11px
    :height 12px
    :padding-left = 11px + 3px + 3px
    :vertical-align middle
  form ul,
  #primary ul,
  #secondary ul,
  #tertiary ul,
  ul.crumbs,
  ul.text,
  ul.tabs,
  ul.menubar
    :list-style none
    :margin-left 0
  ul.tabs,
  ul.menubar
    li
      :display inline
  ul.menubar
    li
    li:after
      :content ' &raquo; '
    li.last:after
      :content ''
  ul.tabs
    li
      :color = !grey_of_the_beast
      :border 1px solid 
      :border-bottom none
      :padding 1em
      :background = !notice_border_color
  ul.tabs li.menu,
  ul.tabs li.menu:hover
    :background-color transparent
    :border none
    :display block
    :float right
    :position relative
  ul.tabs li.selected
    :background white
    :color = !font_color
  ul.crumbs li
    :display inline

  tr.extended
    img
      :float left
    p + p
      :text-indent 0
      :padding-top 1em

  div.menu
    /* a bad choice of name for the pagination include class
    :margin 0 auto
    /* width: 100% won't work for auto-margin centering here
    :width 14em
    :margin-bottom 1.5em


  -# Starting to go directly against the comps at  9:04:28 PM EST on Wednesday, November 12 2008
  -# so here I will define many global styles that provide details I see in the designs

  a,
  a:visited
    /* Really bad to be unsetting visited links color :(
    :color = !medium_blue
    :font-weight bold
    :text-decoration none
  a:hover
    :text-decoration underline
    :background-color none

  table
    :border-collapse collapse
    /* DATA tables, designed to be used with the subtabs control, below
    :background transparent top left no-repeat
    :background-image = !horizontal_tab_rule_img
    /* Allow the subtabs UL to overlay the background image in this table
    /* Doing this with a negative margin is rife with gremlins tho
    :margin-top -4px
    /:padding-top 1.5em
    /* Make space for the background image, on the left hand edge
    / :margin-left -1em
    :padding-left 1em
    /* Zebra striped table rows
    /* The hover effect is definedin pages.sass
    tr.even
      :background-color = !light_grey
      td
        :background-color = !light_grey
    th
      :padding-top = !subtabs_vertical_space
      :background transparent
      :font-size 1.1em
      a.selected
        :padding-right 16px
        :background transparent no-repeat right 1px
        :background-image = !down_arrow_img
      a.selected:hover
        :background-image = !hot_down_arrow_img

    th.title
      :width 25%
    th.excerpt
      :width 60%
    th.date

    td.date
      a,
      a:hover,
      a:visited
        :color = !grey_of_the_beast
        :text-decoration underline
        :font-weight normal



    td
      h2
        :font-size 1em

    tr.paginator
      td
        :padding-top 1.5em
        :text-align center
        .pagination
          :font-weight bold
          a:hover
            :color = !grey_of_the_nazgul
          .next_page,
          .prev_page
            :margin-top 0.2em
            :width 11px
            :height 12px
            :position absolute
            :text-indent -9999px


          .next_page
            /* make a right-pointing arrow appear to the left of the link text
            :background transparent no-repeat
            :background-image = !right_arrow_bg_img
            :margin-left 3px
            / :display block
            /:padding-left = 11px + 3px + 3px
            / :vertical-align middle
          .next_page:hover
            :background transparent 
            :background-image = !hot_right_arrow_bg_img

          .prev_page
            /* make a left-pointing arrow appear to the right of the link text
            :background transparent no-repeat
            :background-image = !left_arrow_img
            :margin-left -14px
            / :display block
            /:padding-right = 11px + 3px + 3px
            / :vertical-align middle
          .prev_page:hover
            :background transparent 
            :background-image = !hot_left_arrow_img

          /* inactive arrow states
          .disabled,
          .disabled:hover
            :background-image none

  table.notabs
    :background-image none

  div.subpager
    /* View 10 | 25 | 50 pages (goes at right edge of subtabs/table control)
    :float right
    a,
    a:hover,
    a:visited
      :color = !font_color
      :font-weight normal
  /* Subtabs:
  /*     These are the tabs that appear at the top of every table.
  ul.subtabs
    /* Tab control for data table
    :list-style none
    :margin-left 29px
    :margin-bottom 0
    li
      :display inline
      h2
        :font-size 1em

      .fakeLink
        :font-weight bold

      a,
      .fakeLink
        :float left
        :margin-right 4px
        :position relative
        :display block
        :background-color = !tabs_grey
        :border 2px solid
        :border-color = !tabs_grey
        :color = !tabs_txt_grey
        :width 105px
        :height 24px
        :padding-top 2px
        :border-bottom none
        :text-align center
        /* Hack - why is the table tab vertical alignment off only on contentsShow?

      a:hover,
      .fakeLink:hover
        :background-color = !notice_bg_color
      a.selected,
      .fakeLink.selected
        :background-color white






  div.callout
    :border 1px solid
    :border-color = !blue
    :min-height 380px

    /* blue boxes
    h2, h3
      :color white
      :font-size 1em
    h2
      :background-color = !blue
      :width auto
      :padding-left 1.5em
      :font-weight bold
      :font-size 1.2em
      :padding-bottom 0.1em
      :padding-left 1.2em
      :padding-top 0.2em
    h3
      :font-size 1.3em
      :margin-bottom 0.3em
      :text-transform capitalize
    ul
      :margin-bottom 1.5em
      li
        :padding 0
        :list-style none
        :margin-left 0
        :margin-bottom 1.3em
        :margin-top 1.3em
        p.publication
          a
            :color = !font_color
            :text-decoration none
            :font-style italic
            :font-weight bold
          a:hover
            :text-decoration underline
          .date
            :font-size 95%
    p a.more
      :color = !font_color
      :float right
      :font-weight bold
      :font-style italic
      :text-decoration underline
      :padding 0 1em 1em

  div.callout.span-11
    /* TODO borders throwing Blueprint widths off again.  Also Chris designs on a 25 column grid, not 24
    :width 456px


  .mainContent
    /* Fieldsets and legends get the same treatment as callout boxes
    fieldset
      :border 1px solid
      :border-top 2.5em solid
      :border-color = !blue
      :background-color = !light_grey
      legend
        :color white
        /* Hack
        :font-size 1.05em
        :line-height 2.35
        :background-color = !blue
  #primary
    +zepstripe
body.admin,
body.admin #primary
  +adminstripe
body.splash
  +nostripe
